<template>
	<a-layout>
		<view>
			<br/>
			<image class="logo-img" :src="headimgurl || headImg" @error="imgError" />
			<view class="head-text-view">
				<text>{{user.name}}</text>
				<text>{{user.telephone}}</text>
				<text>{{user.schoolName}}-{{user.campusName}}</text>
			</view>
		</view>
		<a-scroll :no-data-style="{backgroundColor:`transparent`,height:`60vh`}" :request="get" ref="aScroll" :parm="{pageSize:3000}">
			<template #item="{row:x,index}">
				<a-grid class='grid' :list="x.children" :cell="3" :closeHeight="true">
					<template #header>
						<view class="grid-title">
							{{x.menuName}}
						</view>
					</template>
					<template #default="{row}">
						<navigator hover-class="none" class="navigator" :url="'/pages/'+row.menuRoute" :style="{color:row.color}">
							<view class="iconfont" :class="row.menuLogo"></view>
							<view style="color:inherit;font-size: .7em;margin-top: .2em;">{{ row.menuName }}</view>
						</navigator>
					</template>
				</a-grid>
			</template>
		</a-scroll>
	</a-layout>
</template>

<script>
	export default {
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		computed: {
			user() {
				return { ...this.$store.state.wxInfo,
					...this.$store.state.userInfo,
					...this.userInfo
				};
			},
			headImg() {
				if (this.user.photo) {
					return '/school' + this.user.photo;
				}
				return this.user.headimgurl || (this.user.sex === '女' ? this.girl : this.boy);
			}
		},
		onLoad(e) {
			this.getInfo();
		},
		watch: {
			'$store.state.loginStatus'(n) {
				if (!n) return;
				this.getInfo();
				this.$refs.aScroll.get(true);
			}
		},
		data() {
			return {
				navList: [],
				userInfo: {},
				headimgurl: '',
				boy: require('./1.png'),
				girl: require('./2.png')
			};
		},
		methods: {
			imgError() {
				this.headimgurl = this.user.sex === '女' ? this.girl : this.boy;
			},
			get(parm = {}) {
				return this.$http.selectLoginUserMenu({
					...parm
				}).then(res => {
					return {
						total: 0,
						data: [{
							menuName: '申请审批',
							children: [{
									menuName: '代请假',
									menuLogo: "icon-gonggao",
									menuRoute: 'proxy_leave/proxy_leave',
								},
								{
									menuName: '请假审批',
									menuLogo: "icon-tongxunlu",
									menuRoute: 'proxy_leave/list',
								}
							],

						}, ...res]
					}
				});
			},
			getInfo() {
				this.$store.dispatch('getInfo').then(res => {
					this.userInfo = res;
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #ebebeb;
	}

	.logo-img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		display: block;
		transform: translateY(-10%);
	}

	.head-text-view {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #fff;
	}

	.grid {
		margin: 10px;
		border-radius: 6px;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
		background-color: #fff;
		overflow: hidden;

		&-title {
			position: relative;
			font-size: 16px;
			padding: 10px 25px;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				border-bottom: 1px solid rgba(0, 0, 0, .3);
				transform: scaleY(.2);
			}
		}

		.navigator {
			min-height: 90px;
			font-size: 18px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: 1.4em;
			}
		}
	}
</style>
